.toc-wrapper {
  position: fixed;
  top: @header-height + @gap * 2;
  right: 50%;
  margin-right: -@container-width / 2;
  width: @side-width;
  z-index: 3;
  padding: @gap / 2 @gap / 2;
  border-left: 3px solid @primary-color;
  transition: all 0.24s ease-out;
  // prevent toc is too heigh.
  overflow: auto;
  max-height: ~"calc(100% - @{header-height} - 2 * @{gap})";

  .enable-trans();
  &:hover {
    &:extend(.z-depth-main-raised);
  }
  &:active {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
  }
  a {
    padding-left: 8px;
    border-left: 3px solid fade(@primary-color, 0);
    color: fade(@text-color, 60%);
    font-size: @small-font-size;
    display: inline-block;
    &:hover,
    &:active,
    &.active {
      color: darken(@text-color-theme, 00%);
      // color: @accent-color;
      font-weight: bold;
      border-left: 3px solid @primary-color;
      background: darken(white, 5%);
    }
  }
  ol {
    &.toc-child {
      padding-left: @gap / 2;
    }
    li {
      list-style: none;
      width: auto;
      &:extend(.txt-ellipsis);
    }
  }
  &:empty {
    display: none;
  }

  @media (max-width: @container-width) {
    right: 0;
    margin-right: 0;
  }

  @media (max-width: @on-phone) {
    top: @header-height;
    right: 3px - @side-width;
    margin-right: 0;
    color: @black;
    width: 35%;
    padding: @gap/4 ;
    &.active {
      transform: translateX(-@side-width);
    }
  }
}
